<!--
    group: 企业管理
    name: 企业入驻----填写法人信息
    url: /enterprise/modules/legalSettled
-->
<template>
  <div>
    <h3>请完善企业负责人信息</h3>

    <a-form-model :model="form" ref="ruleForm" :rules="rules"
                  :label-col="labelCol" :wrapper-col="wrapperCol"
    >
      <a-form-model-item label="法人实名手机号" prop="legalPhone">
        <a-input v-model="form.legalPhone" placeholder="请输入手机号码" />
      </a-form-model-item>
      <a-form-model-item label="身份证" :label-col="{span: 6 }" :wrapper-col="{ span: 17 }">
<!--        <UpLoadFile ref="qyfzrxx_sfz" v-model="shenfeninfo" :config="sfzConfig" ></UpLoadFile>-->
        <p-UpLoadFile ref="qyfzrxx_sfz" :config="sfzConfig" v-model="shenfeninfo" :showHelp="true" :customRequestEvent="PUpLoadFileCustomRequestEvent"></p-UpLoadFile>
        <div>上传身份证证件照：请上传法人有效身份证信息。支持jpg,png,jpeg格式大小不超过5M</div>
      </a-form-model-item>
      <a-form-model-item label="姓名">
        <a-input v-model="form.legalInfo.legalName" disabled />
      </a-form-model-item>
      <a-form-model-item label="身份证号">
        <a-input v-model="form.legalInfo.cardNumber" disabled />
      </a-form-model-item>
      <a-form-model-item label="身份证地址">
        <a-input v-model="form.legalInfo.cardAddress" disabled />
      </a-form-model-item>
      <a-form-model-item label="有效期">
        <a-input v-model="form.legalInfo.cardTerm" disabled />
      </a-form-model-item>
      <a-form-model-item label="政治面貌" prop="politicsStatus">
        <a-select v-model="form.politicsStatus" placeholder="请选择">
          <a-select-option v-for="item in face" :value="item.itemValue">{{ item.itemText }}</a-select-option>
        </a-select>
      <!--<j-dict-select-tag v-model="form.politicsStatus" placeholder="请选择" dictCode="face"/>-->
      </a-form-model-item>
      <a-form-model-item label="文化程度" prop="standardCulture">
        <a-select v-model="form.standardCulture" placeholder="请选择">
          <a-select-option v-for="item in education" :value="item.itemValue">{{ item.itemText }}</a-select-option>
        </a-select>
      <!--<j-dict-select-tag v-model="form.standardCulture" placeholder="请选择" dictCode="education"/>-->
      </a-form-model-item>
      <a-form-model-item label="电子邮箱" prop="email">
        <a-input v-model="form.email" placeholder="请输入电子邮箱" />
      </a-form-model-item>
      <a-form-model-item label="工商注册手机号" prop="businessPhone">
        <a-input v-model="form.businessPhone" />
      </a-form-model-item>


      <a-form-model-item :wrapper-col="{ span: 14, offset: 6 }">
        <a-button type="primary" @click="nextStep">下一步</a-button>
      </a-form-model-item>
    </a-form-model>

  </div>
</template>

<script>
import '@/utils/rem'  //rem
import '@/assets/css/enterprise.less'  //css
import JDictSelectTag from '../../../components/dict/JDictSelectTag.vue'
import uploadFiles from '@/views/common/uploadFiles'
import { getVerifyOcrIDCard } from '@/api/api'
import { getLegalRegist,queryEntInfo } from "@/api/enterprise";
import enterpriseList from '@/api/enterprise.json'
import { cloneObject,verificationIDCardInfo,carriedParameters } from "@/utils/util";
export default {
  name: 'legalSettled',
  data(){
    return{
      shenfeninfo:{},
      labelCol: { span: 6 },
      wrapperCol: { span: 8 },
      form: {
        legalInfo: {},  //法人信息
        legalPhone: '',  //法人实名手机号
        businessPhone: '', //工商注册手机号

        resource: 1,
      },
      rules:{
        standardCulture:[{ required: true, message: '请选择文化程度', trigger: 'change' }],
        politicsStatus:[{ required: true, message: '请选择政治面貌', trigger: 'change' }],
        email:[
          { required: false, message: '请输入电子邮箱', trigger: 'blur' },
          { validator: this.validateEmail }
        ],
        legalPhone:[
          { required: true, message: '请输入法人实名手机号', trigger: 'blur' },
          { validator: this.validatePhone }
        ],
        businessPhone:[
          { required: true, message: '请输入工商注册手机号', trigger: 'blur' },
          { validator: this.validatePhone1 }
        ],
      },

      face: enterpriseList.face,
      education: enterpriseList.education,

      objSfz:{   //身份证
        shenfenz:null,
        shenfenf:null,
      },
      sfzConfig: {
        // 此参数必填  上传路径
        dir: "/qsb/idCard/",
        // 单文件 多文件 身份证  all   ；  单文件 对应 card1 ；   多文件 对应  card3 ； 身份证  对应  card1（身份证正面）、card2（身份证反面）
        model: "身份证",
        // 此参数选填   此属性只在 model= 身份证 时 启用   默认值文false
        showBG: true,
        // 此参数选填  表示是否可编辑
        readonly: false,
        // 提示信息
        tips:{
          card1: '身份证人像面',
          card2: '身份证国徽面',
        },
        // 此参数选填   文件上传必填校验 默认为false 不校验   当值为true时进行强制校验  需要配合【getDataCheckRes】方法使用；
        // 方法【getDataCheckRes】的具体用法如: this.$refs.UpLoadFile.getDataCheckRes({ card1: "请上传身份证正面",card2: "请上传身份证反面", card3: "请上传附件"});
        // 其中 【getDataCheckRes】的参数辨识检验不通过时对应的提示信息；card1、card2、card3均可缺省，也可选填对应的字段    此参数可空
        required: true,
        // 此参数选填   要回显的数据 card1 card2 的值的格式为：{name:'',url:''} ;  card3 的值的格式为 [{name:'',url:''}，{name:'',url:''}]
        defaultFileList: {
          card1: {},
          card2: {},
        },
        // 此参数集必填
        fielConfig: {
          // 允许上传的文件类型 当为空时表示不限制  默认为空
          //    可供选择类型：
          //          图片('jpg', 'png', 'jpeg')
          //          文档('xlsx', 'xls', 'pptx', 'ppt', 'pdf', 'doc', 'docx', 'txt')
          //          压缩包('zip', 'rar')  发票('pdf', 'jpg', 'png', 'jpeg', 'doc', 'docx', 'zip', 'rar')
          //          PDF(pdf)
          //          委托代征协议('pdf','jpg', 'png', 'jpeg')
          //          我的任务('jpg', 'png', 'jpeg','pdf','xlsx', 'xls', 'pdf', 'doc', 'docx','zip', 'rar' )
          // eg:
          //    当值为string类型时，对所有（card1,card2,card3）的有效；
          //    当值为对象（{"card1":'图片',"card2":'文档', "card3":'PDF'}）时，可指定每个（card1/card2/card3）所对应的类型
          type: "图片",
          // 允许上传的文件个数  默认值为1
          // eg: 1 表示只允许上传1个文件；
          //      当值为对象（{"card1":1,"card2":2, "card3":3}）时，可指定每个（card1/card2/card3）所对应的类型
          size: 1,
          // 上传的单个文件大小 单位为 MB  默认值为1
          //  eg: 当值为 number 时，对所有（card1,card2,card3）的有效；
          //        当值为对象（{"pdf":5,"xlsx":10, "zip":100}）时,可指定对应的文件类型的大小（单位：MB）
          singleFileSize: 10,
        },
      },
      sfzConfig1: {
        dir:'/qsb/idCard/', // 上传文件的地址
        required:true, // 文件上传必填校验 默认为false 不校验   当值为true时进行强制校验
        showCardList:['card1','card2'],
        upLoadCardListConfig:[
          {type:'1',tips:'身份证人像面',fileInfo:{name:'',url:''}},
          {type:'1',tips:'身份证国徽面',fileInfo:{name:'',url:''}}
        ], // 此项最多可以传两组值 {type:'1',tips:'身份证人像面',backgroundPic:''},
        fielConfig:{
          type:'图片', // 允许上传的文件类型 当为空时表示不限制  默认为空   可供选择类型： 图片  文档  压缩包  发票
          size: 2, // 允许上传的文件个数  默认值为1
          singleFileSize: 5, //上传的单个文件大小 单位为 MB  默认值为1
        }
      },
    }
  },
  components:{
    JDictSelectTag,
    uploadFiles
  },
  props: ['channelId','updateFormData'],
  created() {
    this.form.serviceConfId = carriedParameters(window.location.href,'serviceConfId');
    this.form.registerType = carriedParameters(window.location.href,'registerType');    //注册类型
    this.form.protocolType = carriedParameters(window.location.href,'protocolType');    //企业所属合作模式
  },
  watch:{
    shenfeninfo:{
      handler(val){
        let params ={};
        params.cardFrontUrl = val.card1.url;
        params.cardBackUrl = val.card2.url;
        this.objSfz.shenfenz = val.card1 && val.card1.url &&val.card1.url
        this.objSfz.shenfenf = val.card2 && val.card2.url && val.card2.url;
        if(params.cardFrontUrl && params.cardBackUrl){
          this.getBusinessLicenseOcrFun(params);
        }
      },
      deep:true
    }
  },
  methods:{
    //下一步
    nextStep(){
      //校验身份证
      let template = this.$refs['qyfzrxx_sfz'].getDataCheckRes({card1:'请上传身份证正面',card2:'请上传身份证反面'});
      if(JSON.stringify(template).indexOf('false')>=0){
        return false
      }

      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          let params = {};
          let newData = cloneObject(this.form);
          params.channelIdEncrept = this.channelId;
          params.legalInfo = this.form.legalInfo;
          params.legalInfo.legalPhone = this.form.legalPhone;  //法人实名手机号
          params.legalInfo.standardCulture = this.form.standardCulture;  //文化程度
          params.legalInfo.politicsStatus = this.form.politicsStatus;  //政治面貌
          params.legalInfo.email = this.form.email;  //电子邮箱
          params.legalInfo.businessPhone = newData.businessPhone;  //工商注册手机号

          params.baseInfo = {};
          // params.baseInfo.registerType = this.form.resource;  //注册类型:1-个体工商户2-个人独资企业3-有限公司4-合伙企业
          params.baseInfo.registerType = this.form.registerType;  //注册类型:1-个体工商户2-个人独资企业3-有限公司4-合伙企业
          params.baseInfo.serviceConfId = this.form.serviceConfId;  //企业服务模式
          params.baseInfo.protocolType = this.form.protocolType;  //企业所属合作模式:1-渠道总2-非渠道总

          this.updateFormData(this.form)
          queryEntInfo(params).then(res => {
            if (res.success){
              //  ticket: "daf44c46164be9ab484dad83643ae3ec",   //无密码登录ticket
              //  entId: 209408,   //企业id
              //  agreeId: 0,    //合同id
              if (res.result){
                let data = res.result;
                this.$emit('nextStep',data);
              }
            }else{
              this.$message.warning(res.message);
            }
          })

        }
      })
    },
    //上传身份证识别ocr
    fileChangeEvent(type,files){
      // console.log('fileChangeEvent===>',type,files);
      this.fileObjf = files;
      if(type == 'card1'){
        this.objSfz.shenfenz = files.url
      }else if(type == 'card2'){
        this.objSfz.shenfenf = files.url
      }
    },
    //身份证ocr识别
    getBusinessLicenseOcrFun(params){
      getVerifyOcrIDCard(params).then(res => {
        if(res.success){
          //判断身份证地址及年龄相关限制
          let val = verificationIDCardInfo(this,res.result.idcardNum,res.result.address);
          window['UserInfo'] = {data:val,params}
          // console.log('判断身份证地址及年龄相关限制===>',val,params);
          for (let k=0; k<val.length;k++) {
            if (val[k]) {
              this.$warning({
                title: '办理提示',
                content: val[k],
              });
            }
          }

        }else{
          this.$warning({
            title: '办理提示--失败',
            content: `失败原因：${res.message} ；请检查上传的身份证图片是否正确！`,
          });
        }
        return res;
      }).then(res => {
        if(res.success){
          // console.log(res)
          this.form.legalInfo = {
            cardAddress: res.result.address,
            cardBackUrl:this.objSfz.shenfenf,
            cardFrontUrl: this.objSfz.shenfenz,
            cardBirth: res.result.birthday,
            cardNation: res.result.race,
            cardPolice: res.result.issuedBy,
            cardSex: res.result.cardSex,
            cardTerm: res.result.validate,
            cardNumber: res.result.idcardNum,
            legalName: res.result.realName,
          }
        }
      })
    },
    // 校验手机号
    validatePhone(rule,value,callback){
      let reg = /^(1\d{10})$/;
      if (!value || reg.test(value)){
        this.verifyMobile(value); //校验手机号是否重复注册
        callback();
      }else{
        callback("您的手机号码格式不正确!");
      }
    },
    validatePhone1(rule,value,callback){
      let reg = /^(1\d{10})$/;
      if (!value || reg.test(value)){
        callback();
      }else{
        callback("您的手机号码格式不正确!");
      }
    },
    //校验邮箱
    validateEmail(rule,value,callback){
      let reg = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
      if (!value || reg.test(value)){
        callback();
      }else{
        callback("您的邮箱格式不正确!");
      }
    },
    //校验法人手机号是否注册
    verifyMobile(phone){
      let isPhone = phone;
      getLegalRegist(isPhone).then(res => {
        if (res.success){

          this.form.businessPhone = phone;
        }else{
          this.$message.warning(res.message);
        }
      })
    },
  }
}
</script>

<style scoped lang="less">
h3{
  color: @color-smudge;
}
.cardUpload{
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.ant-form-item-control-wrapper input{
  width: 100%;
  margin: 0 5px;
}
</style>
